<%@page import="com.mmy.domain.sys.TSysUser"%>
<%@page import="com.mmy.domain.constzone.TConstZone"%>
<%@page import="com.mmy.domain.line.TLineBase"%>
<%@page import="com.mmy.domain.sys.TSysOrg"%>
<%@page import="com.mmy.domain.line.TLinePlace"%>
<%@page import="com.mmy.domain.line.TLineTrip"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<% TSysUser tSysUser = (TSysUser) session.getAttribute("tSysUser");%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/WEB-INF/jsp/includeb.jsp"></jsp:include>
<script src="js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue/eleme.js"></script>
<link rel="stylesheet" type="text/css" href="css/eleme.css"/>
<title>出团</title>
</head>
<style>
	.el-input{
		width:225px;
	}
	.box{
		border:1px solid #cccccc;
		border-radius: 4px;
		padding-top: 1rem;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}
	.area{
		width: 1000px;
	}
	.switch{
		padding-left: 20px;
	}
</style>
<body>
<div id="off-canvas-container" class="off-canvas-container">
		<jsp:include page="/WEB-INF/jsp/BackHeader.jsp"></jsp:include>
		<main class="at-padding-large-bottom">
		<article>
		<header class="bg-light at-padding-large-top at-padding-large-bottom at-margin-large-bottom">
		<div class="page-header container">
			<div class="row">
				<div class="span-5 col">
					<h3>出团</h3>
				</div>
			</div>
		</div>
		</header> 
		<div id="app">
		<section class="container">
		<div class="information">
			<h4 class="info-h4">
				<i class="fa fa-caret-right" aria-hidden="true"></i>出团结账
			</h4>
		</div>
		<a href="linegroup2">出团结账单</a>
		<el-form :model="ff" ref="ff" :inline="true" label-width="108px">
			<el-divider></el-divider>
			<el-form-item label="导游" prop="GuideID" :rules="{required: true, message:'请选择导游',trigger: 'change'}">
				<el-select v-model="ff.GuideID" filterable placeholder="请选择">
					<el-option v-for="tour in tours" :key="tour.value" :label="tour.label" :value="tour.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="导游电话" prop="GuideTel" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.GuideTel"></el-input></el-form-item>
			<el-form-item label="车辆编号" prop="CarID" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.CarID"></el-input></el-form-item>
			<el-form-item label="实到人数" prop="TypeID" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.TypeID"></el-input></el-form-item>
			<el-form-item label="负责人" prop="DriverTel" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.DriverTel"></el-input></el-form-item>
			<el-form-item label="加油次数" prop="Kilometer" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.Kilometer"></el-input></el-form-item>
			<el-form-item label="加油费" prop="CustomNum" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.CustomNum"></el-input></el-form-item>
			<el-form-item label="出团公里数" prop="CenterDetail" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.CenterDetail"></el-input></el-form-item>
			<el-form-item label="回团公里数" prop="AddOil" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.AddOil"></el-input></el-form-item>
			<el-form-item label="高速费" prop="RoadBridge" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.RoadBridge"></el-input></el-form-item>
			<el-form-item label="道桥费" prop="CharterCar" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.CharterCar"></el-input></el-form-item>
			<el-form-item label="停车费" prop="Total" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.Total"></el-input></el-form-item>
			<el-form-item label="领取团款" prop="Receive" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.Receive"></el-input></el-form-item>
			<el-form-item label="自费盈利" prop="MealAllowance" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.MealAllowance"></el-input></el-form-item>
			<el-form-item label="带出团费" prop="ActualTotal" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input v-model="ff.ActualTotal"></el-input></el-form-item>
			<el-form-item label="备注说明" prop="TicketSituation" :rules="{required: true, message:'请输入',trigger: 'blur'}"><el-input type="textarea" v-model="ff.TicketSituation"></el-input></el-form-item>

			<el-divider></el-divider>
		</el-form>

		<center>
			<el-button type="primary" @click="submit('ff')">提交</el-button>
			<el-button type="primary" @click="test()">测试</el-button>
		</center>
		
	</div><!-- container -->
	</div><!-- app -->
	</section>
	</article>
	</main>
	<jsp:include page="/WEB-INF/jsp/Footer.jsp"></jsp:include>
</body>
<script>
	const vue = new Vue({
		el:"#app",
		data(){
			return{
				ff:{
					GuideID:'',GuideTel:'',CarID:'',TypeID:'',DriverTel:'',Kilometer:'',
					CustomNum:'',CenterDetail:'',AddOil:'',RoadBridge:'',CharterCar:'',
					Total:'',Receive:'',MealAllowance:'',TicketSituation:'',ActualTotal:'',
					grouds:[
						{GroudName:'',GroudTel:''}
					],
					scenics:[
						{PlanID:'',Num:'',Total:''}
					],
					hotels:[
						{PlanID:'',Num:'',Total:''}
					],
					rests:[
						{PlanID:'',Num:'',Total:''}
					]
				},
				tours:[
					{value:10001,label:'马老师1',tel:'1234'},
					{value:10002,label:'马老师2',tel:'12345'},
					{value:10003,label:'马老师3',tel:'123456'},
					{value:10004,label:'马老师4',tel:'1234567'}
				]
			}
		},
		methods:{
			submit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post('testpost',this.ff)
						.then(response => (console.log(response.data)))
						.catch(error => console.log(error));
						console.log(this.ff);
						this.$message.success('提交了');
					} else {
						this.$message.error('请根据提示正确填写！');
						return false;
					}
				});
			},
			addGroud(item){
				this.ff.grouds.push(
					{GroudName:'',GroudTel:'',key:Date.now()}
				);
			},
			removeGroud(item){
				let index = this.ff.grouds.indexOf(item);
				if(index !== -1){
					this.ff.grouds.splice(index,1)
				}
			},
			test(){
				axios
					.get('teststr')
					.then(response => (console.log(response.data.EUR)))
					.catch(error => console.log(error))
			}

		}
	});
</script>
</html>

